import "../css/loading.css";
import loading from "../../../../imgs/loading.gif";

const hei = document.documentElement.clientHeight || document.body.clientHeight;
const wid = document.documentElement.clientWidth || document.body.clientWidth;


const loadingContent = `<div class="search-page-loading"><div class="h-loading-loading h-loading-default-loading" delay="200" role="Loading"><span class="h-loading-spinner h-loading-default"><i class="h-loading-spinner-dot h-loading-spinner-fst-dot h-loading-default-dot"></i><i class="h-loading-spinner-dot h-loading-spinner-snd-dot h-loading-default-dot"></i><i class="h-loading-spinner-dot h-loading-spinner-trd-dot h-loading-default-dot"></i><i class="h-loading-spinner-dot h-loading-spinner-fth-dot h-loading-default-dot"></i></span></div></div>`;


export default {
    loading: function() {
        let app = document.querySelector("#reactRoot");
        let divEle = document.createElement("div");
        divEle.id = "loading_modal";
        divEle.style.height=`${hei}px`;
        divEle.style.width=`${wid}px`;
        divEle.className = `toast-utils-loading`;
        divEle.innerHTML = loadingContent;
        app.appendChild(divEle);
    },

    hide: function() {
        let app = document.querySelector("#reactRoot");
        let loading_modal = document.querySelector("#loading_modal");
        if (loading_modal) {
            app.removeChild(loading_modal);
        }
    },


};
